<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: SpriteSheetBuilder</title>

	<link href="../assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<script src="../assets/tweenjs-NEXT.min.js"></script> <!-- required for MovieClip -->

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<script type="text/javascript" src="../../src/easeljs/display/MovieClip.js"></script>
	<script src="gunnertron_g.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var canvas, stage, mc, w;
	var scale = 0.5;

	function init() {
		//find canvas and load images, wait for last image to load
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		
		mc = new lib.gunnertron();
		w = mc.nominalBounds.width*scale;
		mc.setTransform(100+w/2,100,scale,scale);
		stage.addChild(mc);
		
		var label1 = stage.addChild(new createjs.Text("MovieClip (vector)", "14px Arial", "#FFF"));
		label1.textAlign = "center";
		label1.setTransform(mc.x,30);
		
		var label2 = stage.addChild(label1.clone());
		label2.text = "Sprite (raster)";
		label2.x += w+30;
		
		// create the sprite sheet builder:
		var builder = new createjs.SpriteSheetBuilder();
		builder.scale = scale;
		builder.maxWidth = 1024;
		builder.addMovieClip(mc);
		builder.addEventListener("complete" ,buildComplete);
		builder.buildAsync();
		
		// append the generated spritesheet image for demo purposes:
		document.body.appendChild(builder._data.images[0]);
		
		createjs.Ticker.setFPS(30);
		createjs.Ticker.addEventListener("tick", stage);
	}
	
	function buildComplete(event) {
		var spriteSheet = event.target.spriteSheet;
		var sprite = new createjs.Sprite(spriteSheet);
        sprite.setTransform(mc.x+w+30|0, mc.y);
		stage.addChild(sprite);
		
		mc.gotoAndPlay(0);
        sprite.gotoAndPlay(0);
	}

	</script>
</head>
	
<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> SpriteSheetBuilder Sample</h1>
	    <p>
	    Using <strong>SpriteSheetBuilder</strong> to create <strong>SpriteSheet</strong> instances asynchronously at run time from a <strong>MovieClip</strong> instance.
	    Note that a spritesheet of this animation (at scale=1) is 2.5MB, whereas the "over the wire" (zipped) size of the movieclip is only 19kb, and it can
	    be scaled dynamically at runtime.
	    
	    </p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="200"></canvas>
	</div>
</body>
</html>
